{% extends "base.html" %}
{% block title %}新增任务{% endblock %}
{% load staticfiles %}
{% block content %}

    <div class=" admin-content">

        <div class="admin-biaogelist">
            <div class="listbiaoti am-cf">
                <ul class="am-icon-flag on"> 系统设置</ul>
                <dl class="am-icon-home" style="float: right;"> 当前位置： 定时任务 > <a href="#">新增任务</a></dl>
            </div>
            <div class="fbneirong">


                <form class="form-horizontal" id="add_task">

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">任务类型</div>
                            <select name="mode" class="form-control" id="mode">
                                <option value="1">Project or Module</option>
                                <option value="2">Test Suite</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">任务名称</div>
                            <input type="text" class="form-control" id="name" name="name" value=""
                                   placeholder="定时任务名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">运行环境</div>
                            <select name="base_url" class="form-control">
                                <option value="">自带环境</option>
                                {% for foo in  env %}
                                    <option value="{{ foo.base_url }}">{{ foo.env_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">可选项目</div>
                            <select id="project" name="project" class="form-control">
                                <option value="">请选择</option>
                                {% for foo in  project %}
                                    <option value="{{ foo.project_name }}">{{ foo.project_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">可选模块</div>
                            <select id="belong_module_id" class="form-control" name="module">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">定时配置</div>
                            <input type="text" class="form-control" id="crontab_time" name="crontab_time"
                                   placeholder="crontab表达式 例如： 11 * * * *" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" style="color: #0a628f">接收邮件</div>
                            <input type="text" class="form-control" id="receiver" name="receiver"
                                   placeholder="xx@qq.com, xx@163.com 为空不发送报告" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <div class="input-group-addon" id="close_collapse" style="color: #0a628f">任务列表</div>

                            <a class="am-btn am-btn-primary am-radius am-btn-block" href="#" id="pre_collapse"
                               style="font-size: 16px; background-color: #fff; color: #555; text-align: left"
                               data-am-collapse="{target: '#pre_case'}">
                                任 务 执 行 顺 序
                            </a>
                            <nav>
                                <ul id="pre_case" class="am-nav am-collapse">
                                </ul>
                            </nav>

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group col-md-4 col-md-offset-1">
                            <a class="btn btn-primary" onclick="info_ajax('#add_task', '/api/add_task/')">点 击 提 交
                            </a>

                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $("#pre_case").sortable();
            $("#pre_case").disableSelection();
        });

        $('#pre_collapse').mouseover(function () {
            $('#pre_case').collapse('open');
        });

        $('#close_collapse').mouseover(function () {
            $('#pre_case').collapse('close');
        });

         $("select[name='mode']").on('change', function () {
             $('#pre_case li').remove();
             $("select[name='module'] option").remove();
            if($('#mode').val() === '1') {
                $("#add_task > div:nth-child(5) > div:nth-child(1) > div:nth-child(1)").text("可选模块");
            }else{
                $("#add_task > div:nth-child(5) > div:nth-child(1) > div:nth-child(1)").text("可选Suite");
            }
        });

        $("select[name='project']").on('change', function () {
            if($('#mode').val() === '1') {
                auto_load('#add_task', '/api/add_task/', '#belong_module_id', 'module');
            }else{
                auto_load('#add_task', '/api/add_task/', '#belong_module_id', 'suite');
            }
        });

        $('#belong_module_id').on('change', function () {
            if ($('#belong_module_id').val() !== '请选择') {
                module_id = $('#belong_module_id').val();
                module_name = $('#belong_module_id option:selected').text();
                var href = "<li id=" + module_id + "><a href='/api/edit_case/" + module_id + "/' id = " + module_id + ">" + module_name + "" +
                    "</a><i class=\"js-remove\" onclick=remove_self('#" + module_id + "')>✖</i></li>";
                $("#pre_case").append(href);
            }
        });

        function remove_self(id) {
            $(id).remove();
        }
    </script>

{% endblock %}